<template>
	<div class="lietou-detail content">
		<div class="detail-bg"></div>
		<div class="lietou-right">
			<div class="lietou-detail-head">
				<router-link 
					:to="{ path:'finaceDetail',query:{ bank: userinfo.bank[0].bank, 
																  bankcardno: userinfo.bank[0].bankcardno, 
																  username: userinfo.bank[0].humanname, 
																  branch: userinfo.bank[0].branch, 
																  cardid:userinfo.bank[0].cardid } }" 
					class="works" v-if="userinfo.bank!== undefined&&userinfo.bank.length>0">我的银行卡</router-link>
				<router-link :to="{ path:'finaceDetail'}"  class="works" v-else>我的银行卡</router-link>
				<section class="flexed">
					<div class="lietou-msg-right">
						<h4 class="card-title">账户余额</h4>
						<h3 class="acount-balance">￥{{userinfo.money}}</h3>
						<el-button type="danger" class="submit-btn" @click="onSubmitMoney">提现</el-button>
					</div>
					<div class="lietou-number lietou-msg-right">
						<h4 class="card-title" style="margin-top:-7px;">银行卡信息</h4>
						<p>持卡人：{{userinfo.bank!== undefined&&userinfo.bank.length>0?userinfo.bank[0].humanname:'暂未绑定'}}</p>
						<p>银行卡号：{{userinfo.bank!== undefined&&userinfo.bank.length>0?userinfo.bank[0].bankcardno:'暂未绑定'}}</p>
						<p>开 户 行：{{userinfo.bank!== undefined&&userinfo.bank.length>0?userinfo.bank[0].bank:'暂未绑定'}}</p>
					</div>
				</section>
			</div>
			<!-- 账户流水 -->
			<div class="table-form">
				<h2 class="lietou-detail-h1">账户流水</h2>
				<el-form ref="form" :inline="true" label-width="80px" size="small">
					<el-form-item label="更新时间" class="search-bar">
						<el-date-picker
					    v-model="createDate"
					    type="daterange"
					    value-format="yyyy-MM-dd"
					    range-separator="至"
					    start-placeholder="开始日期"
					    end-placeholder="结束日期"
					    style="width:250px;">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="收支" class="search-bar">
						<el-select placeholder="请选择" v-model="status" style="width: 80px;">
						    <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item style="margin:-2px 0 0 10px;">
						<el-button icon="el-icon-search" @click="searchData" class="buttonStyle">搜索</el-button>
						<el-button icon="el-icon-download" type="success" class="buttonStyle2" @click='exportExcel'>导出</el-button>
					</el-form-item>
				</el-form>
				<el-table header-row-class-name="my-table-header" :data="tableData" class="answerTable" style="width: 100%;"
				 :header-cell-style="{ background: '#eee',color:'#555555'}" stripe :row-style="{height:'54px'}"
				 :highlight-current-row="true">
					<el-table-column fixed type="index" label="序列" width="90" column-key="id" align="center"></el-table-column>
					<el-table-column prop="money" label="金额(元)" align="center" width="150"></el-table-column>
					<el-table-column prop="moneytype" label="收支" align="center" width="120"></el-table-column>
					<el-table-column prop="paydesc" label="描述" align="center"></el-table-column>
					<el-table-column prop="create_time" label="时间" align="center" width="220"></el-table-column>
					<el-table-column prop="paytype" label="状态" align="center" width="220"></el-table-column>
				</el-table>
				<el-row type="flex" class="row-bg" justify="center" v-show="pageCount>1">
					<el-col :span="24" style="text-align:center;margin-top:50px">
						<el-pagination background layout="prev, pager, next" :page-size="pageSize" :page-count="pageCount" :current-page="pageNo"
						 @current-change="pageChange">
						</el-pagination>
					</el-col>
				</el-row>
			</div>
			
		</div>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		name: 'FinaceManage',
		computed: {
			...mapGetters([
				'token',
				'userinfo'
			])
		},
		data() {
			return {
				createDate:['',''],//开始时间
				statusList:[{value:'0',label:'全部'},
				           {value:'1',label:'收入'},
				           {value:'-1',label:'支出'}],
				status:'0', // 1 增加 -1 减少 0 全部
				tableData: [], //表格数据
				pageCount: 0,
				pageNo: 1,
				pageSize: 10,
			}
		},
		async created() {
			this.loadData();
		},
		methods:{
			// 搜索
			searchData(){
				this.pageNo=1;
				this.loadData();
			},
			//分页
			pageChange(val) {
			  this.pageNo = val;
			  this.loadData()
			},
			async loadData(pages,downsize) {
			  const loading = this.$loading({
				 lock: true,
				 text: 'Loading',
				 spinner: 'el-icon-loading',
				 background: 'rgba(0, 0, 0, 0.5)'
			  });
			  try {
				let data = {
					"token": this.token,
					"id": this.userinfo.id,
					"type": 'daili',
					"paytype": this.status, //	资金类型 1 增加 -1 减少 0 全部	0
					"usertype": '1',  //否	用户类型 1 纯猎头 2 纯企业 0 全部	0
					"begintime": this.createDate!=null ? this.createDate[0]:'',//时间范围开始时间
					"endtime": this.createDate!=null? this.createDate[1]: '',//时间范围结束时间
					"p": pages==undefined?this.pageNo:pages,//分页页码
					"size": downsize==undefined?this.pageSize:downsize,//分页每页数量
				 }
				 let res = await this.$http({
					url: '/man/pay/getPayLog',
					method: 'post',
					params: data
				 });
				 res.data.forEach(item=>{
					 item.money = parseFloat(item.money).toFixed(2)
				 })
				 if(downsize != undefined){
					 loading.close();
					 return res.data
				  }else{
					 this.tableData = res.data;
					 this.pageCount = res.max_page; //总页数
					 this.pageNo = Number(res.p); //当前页 size当前页
				  } 
				 loading.close();
			  } catch (e) {
				 console.log(e)
				 loading.close();
			  }
			},
			// 提现
			onSubmitMoney(){
				if(this.userinfo.bank!== undefined&&this.userinfo.bank.length>0){ //已绑定银行卡
					this.$prompt('请输入提现金额？', '提示', {
						 confirmButtonText: '确定',
						 cancelButtonText: '取消',
						 inputPattern:  /^\d+(\.\d{0,2})?$/,
             inputPlaceholder:'请输入提现金额',
						 inputErrorMessage: '提现金额只能为数字，最多保留两位小数'
					}).then(({ value }) => {
						this.tixianHandle(value)
					})
				}else{
					this.$confirm('您还未绑定银行卡，是否立即去绑卡？', '操作确认', {
						 confirmButtonText: '确定',
						 cancelButtonText: '取消',
						 type: 'warning'
					}).then(() => {
						this.$router.push({path: 'finaceDetail',query: {}})
					});
				}
			},
			// 提现操作
			async tixianHandle(value){
				try {
					let res = await this.$http({
						url: '/man/pay/addCash',
						method: 'post',
						params: {
							"token": this.token,
							"money": value,
						}
					});
					this.$message({
						type: 'success',
						message: '申请已提交，请耐心等待！'
					});
					this.$store.dispatch('user/getInfo');
					this.pageNo=1;
					this.loadData();
				} catch (e) {
					console.log(e)
				}
			},
			// 导出
			exportExcel(){
			  this.downloadLoading = true;
			  import('@/vendor/Export2Excel').then(excel => {
				 const tHeader = ['金额(元)', '收支', '描述', '时间','状态']
				 const filterVal = ['money', 'moneytype', 'paydesc', 'create_time', 'paytype']
				 
				 let promise = new Promise(resolve=>{
					resolve(this.loadData(1, 10000))
				 })
				 promise.then(res=>{
					const list = res;
					console.log(res)
					const data = this.formatJson(filterVal, list)
					excel.export_json_to_excel({
					  header: tHeader,
					  data,
					  filename: '账户流水',
					  autoWidth: true,
					  bookType: 'xlsx'
					})
					this.downloadLoading = false
				 })
			  })
			},
			formatJson(filterVal, jsonData) {
			  return jsonData.map(v => filterVal.map(j => {
				 if (j === 'timestamp') {
					return parseTime(v[j])
				 } else {
					return v[j]
				 }
			  }))
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lietou-detail{
		// background-color: #f4f4f4;
		background-color: rgb(240, 242, 245);
		position: relative;
		
		.detail-bg {
		  position: fixed;
		  top: 0px;
		  left: 0;
		  bottom:0;
		  right: 0;
		  background: #f4f4f4;
		}
		
	}
	.el-button.buttonStyle{
	  height: 32px;
	  font-size: 14px;
	  font-family: PingFangSC-Medium, PingFang SC;
	  font-weight: 500;
	  color: #FFFFFF;
	  background:#3674FF;
	  border-radius: 5px;
	  border:0;
	  margin-left:6px;
	  margin-top:2px;
	}
	.el-button.buttonStyle2{
	  font-size: 14px;
	  border-radius: 5px;
	  margin-left:15px;
	}
	.lietou-detail-head{
		background-color: #fff;
		margin:0 0 20px 0px;
		padding-bottom:25px;
		position: relative;
		min-width:800px;

		.lietou-msg{
			width:280px;
			display: flex;
			margin-left:30px;
		}
		.lietou-msg-right{
			width:330px;
			margin-left:30px;
			font-size:16px;
			p{
				line-height: 35px;
				margin:0;
				color:#555;
			}
		}
		.works{
			position: absolute;
			top:20px;
			right:30px;
			color: rgba(33, 120, 241, 1);
		}
		.lietou-number{
			border-left:1px #ddd solid;
			padding-left:30px;
			margin-top:30px;
		}
		.lahei-btn{
			position: absolute;
			right:30px;
			top:25px;
		}
		.acount{
			margin:0 0 20px 30px;
			padding-top:8px;
			
			span{
				margin-right:50px;
			}
		}
		.answerTable{
			margin:10px auto;
			width: 96%;
		}
		.acount-balance{
			font-size:36px;
			font-weight: 500;
		}
		.submit-btn{
			display: block;
			margin-top:-5px;
		}
	}
	.table-form{
		background-color: #fff;
		padding:0 20px 20px;
	}
	.lietou-detail-h1{
		font-size:17px;
		line-height: 20px;
		font-weight: bold;
		padding:20px 0 10px;
	}
	.search-bar{
		::v-deep{
			.el-form-item__label{
				font-weight: 500;
			}
		}
	}
</style>
<style>
	.el-message{
		top:120px !important;
	}
</style>
